<template>
  <!-- :close-on-press-escape="false" -->
  <section>
    <el-dialog
      title="修改密码"
      :visible.sync="dialogShow"
      width="auto" :show-close="isShowClose"
      :close-on-click-modal="isShowClose"
      :close-on-press-escape="isShowClose"
      @click.native="(e) => e.stopPropagation()"
      @close="$emit('close')"
    >
      <div class="reset">
        <!-- <div class="logo">
          <img :src="'static/img/logo.png'" alt="logo">
        </div> -->
        <!-- <bt-col-header title="修改密码" /> -->
        <el-card class="box-card">
          <!-- <div slot="header">
            <span class="box-card-title">修改密码</span>
          </div> -->
          <el-form
            ref="submitForm" class="reset-body" :model="submitForm"
            :rules="submitFormRules" label-width="80px"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item label="旧密码" prop="oldpwd">
                  <el-input
                    v-model="submitForm.oldpwd" type="password" :disabled="loading"
                    auto-complete="off"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="新密码" prop="newpwd">
                  <el-input
                    v-model="submitForm.newpwd" type="password" :disabled="loading"
                    auto-complete="off"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="确认密码" prop="surepwd">
                  <el-input
                    v-model="submitForm.surepwd" type="password" :disabled="loading"
                    auto-complete="off"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="">
                  <div class="reset-flex-box">
                    <el-button
                      :plain="true" :loading="loading" type="info"
                      icon="save" @click="submitFormClick"
                    >
                      确定
                    </el-button>
                    <el-button
                      :plain="false" :disabled="loading" icon="quit"
                      @click="reset"
                    >
                      重置
                    </el-button>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import { post, cacheUtil } from 'utils/util';
const sendServletUrl = SERVICE_URL + '/modify_password/modify_oper_password';
const changeServletUrl = '/msg-plat-service/password_email/pwd_fix_send';

export default {
  name: 'Reset',
  props: {
    as: {
      type: Object,
      default() {
        return {};
      }
    },
		dialogVisible: {
			type: Boolean,
      default() {
        return true;
      }
		},
		isShowClose: {
			type: Boolean,
      default() {
        return false;
      }
		}
  },
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'));
      } else {
        if (this.submitForm.surepwd !== '') {
          this.$refs.submitForm.validateField('surepwd');
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.submitForm.newpwd) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      submitForm: {
        id: '',
        oldpwd: '',
        newpwd: '',
        surepwd: ''
      },
      submitFormRules: {
        oldpwd: [{
          required: true,
          message: '请输入旧密码',
          trigger: 'blur'
        }, {
          min: 6,
          max: 30,
          message: '长度在 6 到 30 个字符',
          trigger: 'blur'
        }],
        newpwd: [{
          required: true,
          validator: validatePass,
          trigger: 'blur'
        }, {
            pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z!@#$%^&*()_+]+$)(?![a-z0-9]+$)(?![a-z!@#$%^&*()_+]+$)(?![0-9!@#$%^&*()_+]+$)[a-zA-Z0-9!@#$%^&*()_+]{8,30}$/,
            message: '密码至少8位，包含大写字母、小写字母、数字、特殊字符(!@#$%^&*()_+)这四种组合中的至少三种组合',
            trigger: 'blur'
          }],
        surepwd: [{
          required: true,
          validator: validatePass2,
          trigger: 'blur'
        }, {
            pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z!@#$%^&*()_+]+$)(?![a-z0-9]+$)(?![a-z!@#$%^&*()_+]+$)(?![0-9!@#$%^&*()_+]+$)[a-zA-Z0-9!@#$%^&*()_+]{8,30}$/,
            message: '密码至少8位，包含大写字母、小写字母、数字、特殊字符(!@#$%^&*()_+)这四种组合中的至少三种组合',
            trigger: 'blur'
          }
				]
      },
      loading: false,
			dialogShow: false,
    };
  },
	computed: {
		// isShow() {
		// 	return this.dialogVisible;
		// }
	},
	watch: {
		dialogVisible(value) {
			console.log('watch', value);
				this.dialogShow = value;
		}
	},
  methods: {
    reset() {
      this.$refs.submitForm.resetFields();
    },
    submitFormClick() {
      this.$refs.submitForm.validate((valid) => {
        if (valid) {
          this.submit();
        } else {
          return false;
        }
      });
    },
    submit() {
      this.loading = true;
      post(
        sendServletUrl,
        {
          id: this.as.ID,
          oldpwd: this.submitForm.oldpwd,
          newpwd: this.submitForm.newpwd,
          surepwd: this.submitForm.surepwd,
          userId: this.as.UserId,
          token: this.as.Token
        },
        resp => {
					console.log('修改密码', resp);

          if (!(resp.data.data.msg === 'success')) {
            this.loading = false;
            this.$message({
              message: resp.data.data.msg,
              type: 'warning'
            });
          } else {
						this.loading = false;
						this.$emit('close');
          }
        },
        err => {
          this.loading = false;
          if (err.status === 'F') {
            Message.error(err.message);
          }
        }
      );
    }
    // sendmailbox(){
    //     post(
    //     changeServletUrl,
    //     {
    //         surepwd: this.submitForm.surepwd,
    //         oper: resp.data.data.seviceParam.oper,
    //         email: resp.data.data.seviceParam.email
    //     },
    //     (resp) => {
    //         this.$message({
    //             message: '发送邮件成功',
    //             type: 'success'
    //         });
    //     },
    //     (err) => {
    //         this.$message.error('发送邮件失败！');
    //     })
    // }
  }
};
</script>

<style lang="scss" scoped>
.reset {
  .logo {
    height: 50px;
    line-height: 50px;
    img {
      height: 40px;
      margin: 0 10px;
    }
  }
  .reset-body {
    width: 500px;
    margin: 30px auto;
    /deep/ .el-input,
    /deep/input {
      height: 35px;
    }
    /deep/ .el-row {
      margin-bottom: 10px;
    }
    .reset-flex-box {
      display: flex;
      /deep/ button {
        flex: 1;
        height: 35px;
      }
    }
  }
}
</style>
